<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;" >
            <el-input
                    clearable
                    v-model="queryParam.name"
                      class="filter-item"
                    style="width: 200px;"
                    placeholder="请输入分类名"
            ></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getOneSort">查找</el-button>
            <el-button class="filter-item" type="primary"  icon="el-icon-edit" @click="addSort">添加分类</el-button>
            <el-button class="filter-item" type="danger"  icon="el-icon-delete" >删除选中</el-button>
        </div>
        <el-table :data="sorts.sort" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="60" align="center">
                <template #default="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类名" width="160" align="center">
                <template #default="scope">
                    <span >{{scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类介绍" width="160" align="center">
                <template #default="scope">
                    <span >{{scope.row.description}}</span>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center">
                <template #default="scope">
                    <span >{{scope.row.created}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="230">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editSort(scope.row)" >编辑</el-button>
                    <el-button  type="danger" size="small" @click="delSort(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="block">
            <el-pagination
                    @current-change=getSort
                    :current-page.sync="currentPage"
                    :page-size="PageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>
        <!--添加或修改弹窗-->
        <el-dialog  :title="title" v-model="dialogFormVisible">
            <el-form  :model="sortForm" >
                <el-form-item  label="分类名" >
                    <el-input  v-model="sortForm.name"  ></el-input>
                </el-form-item>
                <el-form-item label="分类介绍">
                    <el-input  v-model="sortForm.description" ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click=submitForm>确 定</el-button>
    </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import { ElMessage } from 'element-plus'
    import {ref,reactive} from 'vue';
    import { getSortPage,addBlogSort,delBlogSort,getBlogSort,editBlogSort} from "@/api/blogsort";
    export default {
        name: "分类管理",
        setup(){
            const current =ref(0);
            const total =ref(0);
            const PageSize=ref(0);
            const sorts= reactive({sort:[]});
            getSort(1);
            function getSort(current) {
                getSortPage(current).then( res=>{
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                    sorts.sort =res.data.data.records;
                })
            }

            const title=ref('');
            const dialogFormVisible=ref(false);
            const formLabelWidth =ref('120px');
            const isEdit=ref(false);
            const sortForm=reactive({
               mid:'', name:'', description:''
            });
            //添加分类
            function addSort() {
                title.value='增加分类'
                dialogFormVisible.value=true;
                isEdit.value=false;

            }
            //编辑分类
            function editSort(row) {
                title.value='编辑分类'
                dialogFormVisible.value=true;
                    sortForm.name=row.name;
                    sortForm.description=row.description;
                    sortForm.mid=row.mid
                isEdit.value=true;


            }
            //向后台发送请求
            function submitForm() {
                console.log(sortForm)
                if (isEdit.value){
                        editBlogSort(sortForm).then(res=>{
                            const data=res.data.success;
                            if (data){
                                dialogFormVisible.value = false;
                                ElMessage.success({
                                    message: '编辑分类成功',
                                    type: 'success'
                                });
                                sortForm.name='';
                                sortForm.description='';
                                getSort(1);
                            }else{
                                dialogFormVisible.value = false;
                                ElMessage.error('编辑分类失败');
                            }
                        })
                }else {
                    addBlogSort(sortForm).then(res=>{
                        const data=res.data.success;
                        console.log(data)
                        if (data){
                            dialogFormVisible.value = false;
                            ElMessage.success({
                                message: '添加分类成功',
                                type: 'success'
                            });
                            sortForm.name='';
                            sortForm.description='';
                            getSort(1);
                        }else{
                            dialogFormVisible.value = false;
                            ElMessage.error('添加分类失败');
                        }
                    })
                }


            }

            //删除分类
            function delSort(row) {
                console.log(row.mid)
                delBlogSort(row.mid).then(res=>{
                    const data=res.data.success;
                    if (data){
                        ElMessage.success({
                            message: '删除分类成功',
                            type: 'success'
                        });
                        getSort(1);
                    }else{
                        ElMessage.error('删除分类失败');
                    }

                })
            }

            //查询
            const queryParam=reactive({
                name:'',type:"0"
            });
            function getOneSort() {
                getBlogSort(queryParam).then( res =>{
                    sorts.sort =res.data.data;
                    console.log(sorts.sort =res.data.data)
                })
            }

            return{current,total,PageSize,sorts,getSort,dialogFormVisible,title,sortForm,addSort,editSort,submitForm
                ,delSort,queryParam,getOneSort}
        }
    }
</script>

<style scoped>

</style>